<template>
  <div class="auth-editor">
    <el-select v-model="authType" @change="onTypeChange">
      <el-option label="无认证" value="none" />
      <el-option label="Bearer Token" value="bearer" />
      <el-option label="Basic Auth" value="basic" />
      <el-option label="API Key" value="apikey" />
      <el-option label="OAuth 2.0" value="oauth2" />
    </el-select>

    <div class="auth-content" v-if="authType !== 'none'">
      <div v-if="authType === 'bearer'" class="bearer-auth">
        <el-form label-width="100px">
          <el-form-item label="Token">
            <el-input
              v-model="auth.bearer.token"
              placeholder="输入 Bearer Token"
              @input="updateAuth"
            />
          </el-form-item>
        </el-form>
      </div>

      <div v-if="authType === 'basic'" class="basic-auth">
        <el-form label-width="100px">
          <el-form-item label="用户名">
            <el-input
              v-model="auth.basic.username"
              placeholder="输入用户名"
              @input="updateAuth"
            />
          </el-form-item>
          <el-form-item label="密码">
            <el-input
              v-model="auth.basic.password"
              type="password"
              placeholder="输入密码"
              @input="updateAuth"
            />
          </el-form-item>
        </el-form>
      </div>

      <div v-if="authType === 'apikey'" class="apikey-auth">
        <el-form label-width="100px">
          <el-form-item label="添加到">
            <el-radio-group v-model="auth.apikey.addTo" @change="updateAuth">
              <el-radio label="header">请求头</el-radio>
              <el-radio label="query">查询参数</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="键">
            <el-input
              v-model="auth.apikey.key"
              placeholder="输入键名"
              @input="updateAuth"
            />
          </el-form-item>
          <el-form-item label="值">
            <el-input
              v-model="auth.apikey.value"
              placeholder="输入值"
              @input="updateAuth"
            />
          </el-form-item>
        </el-form>
      </div>

      <div v-if="authType === 'oauth2'" class="oauth2-auth">
        <el-form label-width="100px">
          <el-form-item label="Grant Type">
            <el-select v-model="auth.oauth2.grantType" @change="updateAuth">
              <el-option label="Authorization Code" value="authorization_code" />
              <el-option label="Client Credentials" value="client_credentials" />
              <el-option label="Password" value="password" />
              <el-option label="Implicit" value="implicit" />
            </el-select>
          </el-form-item>
          <el-form-item label="Access Token">
            <el-input
              v-model="auth.oauth2.accessToken"
              placeholder="输入 Access Token"
              @input="updateAuth"
            />
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AuthEditor',
  props: {
    auth: {
      type: Object,
      default: () => ({
        type: 'none',
        bearer: { token: '' },
        basic: { username: '', password: '' },
        apikey: { addTo: 'header', key: '', value: '' },
        oauth2: { grantType: 'authorization_code', accessToken: '' }
      })
    }
  },
  data() {
    return {
      authType: 'none'
    }
  },
  created() {
    this.authType = this.auth.type || 'none'
  },
  methods: {
    onTypeChange() {
      this.auth.type = this.authType
      this.updateAuth()
    },
    
    updateAuth() {
      this.$emit('update', this.auth)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../../styles/variables.scss';

.auth-editor {
  .auth-content {
    margin-top: $spacing-medium;
    padding: $spacing-medium;
    background: $border-extra-light;
    border-radius: 4px;
  }
}
</style>